<template>
  <el-card shadow="never" body-style="padding:22px 22px 0 22px;">
    <!-- 搜索表单 -->
    <el-form
      ref="searchForm"
      label-width="120px"
      @submit.native.prevent
    >
      <el-row>
        <el-col :md="8" :sm="12">
          <el-form-item label="关键字:" prop="name">
            <el-input v-model="key" placeholder="请输入关键字" clearable />
          </el-form-item>
        </el-col>
        <el-col :md="8" :sm="12">
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              class="ele-btn-icon"
              @click="setKey(true)"
            >查询
            </el-button>
            <el-button
              @click="setKey(false)"
            >重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script>
export default {
  name: 'KeySearch',
  data() {
    return {
      key: ''
    }
  },
  methods: {
    setKey(status) {
      if (status) {
        this.$emit('send-key', this.key)
      } else {
        this.key = ''
        this.$emit('send-key', '')
      }
    }
  }
}
</script>

<style scoped>

</style>
